  function $(id){
      return document.getElementById(id);
  }   
  window.onload = function(){   
      $('scroll').onmouseover = function(){ //鼠标放在屏幕上的效果
          var arrs = this.getElementsByClassName('arr');
          for (var i = 0; i < arrs.length; i++) {
              arrs[i].style.display = 'block';
          }
      }
      $('scroll').onmouseout = function(){  //鼠标离开屏幕中心时不显示
          var arrs = this.getElementsByClassName('arr');
          for (var i = 0; i < arrs.length; i++) {
              arrs[i].style.display = 'none';
          }
      }
      
    var imgCount = $('sl').getElementsByTagName('li').length;
    for (var i = 0; i < imgCount; i++) {
        var li = document.createElement('li');
        li.innerHTML = i+1;
        if(i == 0){
            li.setAttribute('class', 'current');
        }
        //根据排它原理实现轮播导航样式
        li.setAttribute('index', i);//给li标签添加一个index属性，用于在点击导航时，获取序号
        li.onclick = function(){
            var lis = $('sc_nav').getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++){
                lis[i].className = '';
            }
            this.className = 'current';
            //设置动画终点位置
            var index = this.getAttribute('index');//getAttribute获得属性的值
            target = index * -1000;
        }
            $('sc_nav').appendChild(li);
    }
          //缓动动画实现动画效果
    var leader = 0;
    var target = 0;
    setInterval(function(){
        leader = leader +(target - leader)/10;
        $('sl_ul').style.left = leader + 'px';

    }, 20);

    //点击箭头滚动
    //左箭头点击事件
    $('prev').onclick = function(){
        if(target < 0){
            target += 1000;
        }else{
            target = -4000;
        }
        setCurrent();
    }
    //右箭头点击事件
    $('next').onclick = function(){
        if(target > -4000){
            target -= 1000;
        }else{
            target = 0;//如果已经是最后一张图，那么再点击就直接回到第一张图
        }
        setCurrent();
    }
    //修改对应的nav栏中的按钮为被选中项
    function setCurrent(){
        var index = Math.abs(target / 1000);//取绝对值
        var lis = $('sc_nav').getElementsByTagName('li');
        for(var i = 0; i<lis.length; i++){
            lis[i].className = '';
        }
        lis[index].className = "current";
    }   
}